<style scoped>
	@import "home.css";


</style>
<style>
	.van-tabs__nav {
		width: 77vw;
		margin: 0 auto!important;
		border: none;
    font-size: 4.5vw!important;
	}

	.van-tab .van-ellipsis {

	}

	.van-notice-bar__left-icon .van-icon__image {
		font-size: 22px;
	}

	.down-item-wrap {
		display: flex;
		align-items: flex-end;
		justify-content: center;
		font-size: 2vw;
	}

	.van-search__content {
		background: #E6E7EB
	}

	.van-notice-bar {
		height: auto;
		padding: 1vw 3vw;
	}

	.baberrage {
		top: 0;
	}

	.baberrage-item {
		z-index: 1000;
	}
	.baberrage-item .baberrage-msg {
		font-size: 4vw;
	}
</style>
<template>
	<div v-if="mainData!=null" >
		<ImageDown v-bind="snowConf"
		           :show="show"></ImageDown>
		<div v-wechat-title="mainData.title" class="active-wrap"
		     :style="{color: (mainData.page.font_color+'!important'),background:mainData.page.background_color}">
			<span @click="toRule" class="entry-rule">活动规则</span>
			<span @click="toTs" class="entry-ts">投诉</span>
<!--			<div :style="{color: (mainData.page.btn_font_color+'!important'),background:mainData.page.btn_color}"-->
<!--			     class="page-title">{{mainData.title}}-->
<!--			</div>-->
			<van-notice-bar v-if="!isNull(mainData.page.notice)" color="#FF5151" background="#FFD8D8" :text="mainData.page.notice"
			                left-icon="http://rongyanstatic.oss-cn-shenzhen.aliyuncs.com/imgs/wap/icon_notice.png"/>
			<div class="banner-wrap">
				<vue-baberrage
          v-if="barrageIsShow"
					class="baberrage"
					:isShow="barrageIsShow"
					:barrageList="barrageList"
					:loop="barrageLoop"
				></vue-baberrage>
				<van-swipe class="banner-swipe" :autoplay="3000" indicator-color="white">
					<van-swipe-item v-for="item in mainData.content.banners" :key="item.img">
						<img class="banner-img" :src="GLOBAL.getUrl(item.img)"/>
					</van-swipe-item>
				</van-swipe>
			</div>

			<div class="active-time-container">
        <div class="range-wrap">
          <div class="active-date-wrap">
            <div class="active-date-title-wrap">
              报名日期
            </div>
            <span style="font-weight: bold;" class="active-date-range" :style="{color: (mainData.page.btn_color)}">
            {{mainData.apply_start_time.substr(0,10)}}
            <span :style="{color: (mainData.page.font_color)}" class="date-range-line">到</span>
            {{mainData.apply_end_time.substr(0,10)}}
          </span>
          </div>
          <div class="active-date-wrap">
            <div class="active-date-title-wrap">
              活动日期
            </div>
            <span style="font-weight: bold;" class="active-date-range" :style="{color: (mainData.page.btn_color)}">
            {{mainData.vote_start_time.substr(0,10)}}
            <span :style="{color: (mainData.page.font_color)}" class="date-range-line">到</span>
            {{mainData.vote_end_time.substr(0,10)}}
          </span>
          </div>
        </div>


				<div class="active-date">
        <span class="active-date-title">
          剩余时间：
        </span>
					<span class="active-date-range">
          <van-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒">
          <template v-slot="timeData">
              <span class="down-item-wrap" :style="{color: (mainData.page.font_color+'!important')}">
                <span :style="{background: (mainData.page.btn_color),color: (mainData.page.btn_font_color)}"
                      class="down-item">{{ getTime(0,timeData.days) }}</span>
                <span :style="{background: (mainData.page.btn_color),color: (mainData.page.btn_font_color)}"
                      class="down-item">{{ getTime(1,timeData.days) }}</span> 天
                <span :style="{background: (mainData.page.btn_color),color: (mainData.page.btn_font_color)}"
                      class="down-item">{{ getTime(0,timeData.hours) }}</span>
                <span :style="{background: (mainData.page.btn_color),color: (mainData.page.btn_font_color)}"
                      class="down-item">{{ getTime(1,timeData.hours) }}</span> 时
                <span :style="{background: (mainData.page.btn_color),color: (mainData.page.btn_font_color)}"
                      class="down-item">{{ getTime(0,timeData.minutes) }}</span>
                <span :style="{background: (mainData.page.btn_color),color: (mainData.page.btn_font_color)}"
                      class="down-item">{{ getTime(1,timeData.minutes) }}</span> 分
                <span :style="{background: (mainData.page.btn_color),color: (mainData.page.btn_font_color)}"
                      class="down-item">{{getTime(0,timeData.seconds) }}</span>
                <span :style="{background: (mainData.page.btn_color),color: (mainData.page.btn_font_color)}"
                      class="down-item">{{ getTime(1,timeData.seconds)  }}</span> 秒
              </span>
            </template>
        </van-count-down>

        </span>
				</div>
			</div>
			<div class="active-num-container">
				<div class="active-num-item">
          <span class="active-num-item-title">
            参与{{mainData.apply.player_label }}
          </span>
					<span class="active-num-item-num"><van-icon name="friends-o" />{{mainData.playerCount}}</span>
				</div>
				<div class="active-num-item-line"></div>
				<div class="active-num-item">
          <span class="active-num-item-title">
            累积投票
          </span>
					<span class="active-num-item-num"><van-icon name="gem-o" />{{mainData.vote_num}}</span>
				</div>
				<div class="active-num-item-line"></div>
				<div class="active-num-item">
          <span class="active-num-item-title">
            活动浏览
          </span>
					<span class="active-num-item-num"><van-icon name="fire-o"  />{{mainData.page.init_views+mainData.viewsCount}}</span>
				</div>
			</div>
			<div v-if="canApply" @click="toApply" class="active-apply-container"
			     :style="{color: (mainData.page.btn_font_color+'!important'),background:mainData.page.btn_color}">
				我要报名
			</div>
			<div class="active-search-container">
				<van-search
					v-model="search"
					show-action
					placeholder="请输入编号或者名称"
					@search="onSearch"
          @clear="onCancel"
        >
					<template #action>
						<div style="padding: 0 6vw"
						     :style="{color: mainData.page.btn_font_color+'!important',background:mainData.page.btn_color }"
						     class="search-btn" @click="onSearch">搜索
						</div>
					</template>
				</van-search>
			</div>
			<div class="active-star" v-if="mainData.star!=null">
				<img class="img-star" :src="GLOBAL.getUrl(mainData.content.voice_player_img,true)" :style="{border:(mainData.page.btn_color +' 2px solid') }">
				<div class="star-name">
					今日之星:{{mainData.star}}
				</div>
			</div>
			<div class="active-player-container">
				<van-tabs v-model="active" type="card" swipeable animated :color="mainData.page.btn_color"
				          title-inactive-color="#999999">
					<van-tab :title="'人气'+ mainData.apply.player_label">
						<div class="active-player-wrap" v-if="sort===GLOBAL.playSort.SORT_VOTE_NUM_DESC">
							<div @click="toPlayer(item.id)" class="active-player-item" v-for="item in players">
								<img class="active-player-item-img"
								     :src="GLOBAL.getUrl(item.imgs[0],true)"/>
								<div class="active-player-item-name">
									<span class="player-vote-name">{{item.player_name}}</span>
									<span>
                    <span class="player-vote-num"
                          :style="{color:mainData.page.btn_color}">{{item.total_vote_num}}</span>
                    票
                  </span>
								</div>
								<div class="active-player-item-info">
                  <span @click="toPlayer(item.id)"
                        :style="{color: (mainData.page.btn_font_color+'!important'),background:mainData.page.btn_color}"
                        class="player-vote">投票</span>
								</div>
							</div>
						</div>
						<div v-if="loadmore" @click="getPlayerData" class="player-more"
						     :style="{color: (mainData.page.btn_font_color+'!important'),background:mainData.page.btn_color}">
							查看更多...
						</div>

					</van-tab>
					<van-tab title="最新参与">
						<div class="active-player-wrap" v-if="sort===GLOBAL.playSort.SORT_NO_DESC">
							<div @click="toPlayer(item.id)" class="active-player-item" v-for="item in players">
								<img class="active-player-item-img"
								     :src="GLOBAL.getUrl(item.imgs[0],true)"/>
								<div class="active-player-item-name">
									<span class="player-vote-name">{{item.player_name}}</span>
									<span>
                    <span class="player-vote-num"
                          :style="{color:mainData.page.btn_color}">{{item.total_vote_num}}</span>
                    票
                  </span>
								</div>
								<div class="active-player-item-info">
                  <span @click="toPlayer(item.id)"
                        :style="{color: (mainData.page.btn_font_color+'!important'),background:mainData.page.btn_color}"
                        class="player-vote">投她一票</span>
								</div>
							</div>
						</div>
						<div v-if="loadmore" @click="getPlayerData" class="player-more"
						     :style="{color: (mainData.page.btn_font_color+'!important'),background:mainData.page.btn_color}">
							查看更多...
						</div>

					</van-tab>
				</van-tabs>
			</div>
			<div class="active-rule-container" >

			</div>
		</div>
    <MyAudio v-if="mainData!=null&&mainData.content.everyday_start===GLOBAL.contentConst.CONTENT_EVERYDAY_STAR_OPEN&&mainData.content.voice_url!=null" :showCtrl="false" :url="GLOBAL.getUrl(mainData.content.voice_url)"></MyAudio>
	</div>
</template>
<script>
  import MyAudio from '@/components/myaudio'
  import ImageDown from '@/components/ImageDown'
  import { getDmListByActive } from '@/api/comment'
  import { getActive } from '@/api/active'
  import { getPlayers } from '@/api/play'
  import { isNull, getActiveId } from '@/libs/util'
  import Vue from 'vue'
  import { vueBaberrage } from 'vue-baberrage'
  Vue.use(vueBaberrage)

  export default {
    name: 'home',
    components: {
      MyAudio, ImageDown
    },
    data () {
      return {
        id: null,
        mainData: null,
        active: 0,
        time: 0,
        search: null,
        players: [],
        sort: 0,
        canApply: false,
        loadmore: true,
        barrageIsShow: false,
        currentId: 0,
        currentIdPage: 1,
        interval: false,
        barrageCount: -1,
        barrageLoop: false,
        barrageList: [],
        tempBarrageList: [],
        snowConf: {
          windPower: 1,
          speed: 3,
          count: 30,
          size: 10,
          opacity: 1,
          images: []
        },

        show: false
      }
    },
    created () {
      this.id = getActiveId()
      this.initData()
    },
    destroyed () {
      this.interval = false;
    },
    watch: {
      active: function (val) {
        if (val === 0) {
          this.sort = this.GLOBAL.playSort.SORT_VOTE_NUM_DESC
        } else {
          this.sort = this.GLOBAL.playSort.SORT_NO_DESC
        }
        this.players = [];
        this.getPlayerData()
      }
    },
    methods: {
      checkCanApply(){
        let endTime =  new Date(this.mainData.apply_end_time.replace(/\-/g, '/'));
        let startTime =  new Date(this.mainData.apply_start_time.replace(/\-/g, '/'));
        let timeNow = new Date();
        if(timeNow.getTime()>=startTime.getTime()&&timeNow.getTime()<=endTime.getTime()){
          this.canApply = true;
        }else {
          this.canApply = false;
        }
      },
      isNull(str){
        return isNull(str);
      },
      initData () {
        try {

          let mainData = this.GLOBAL.getMainData()
          if (mainData == null || !mainData) {
            this.getData()
          } else {

            this.setInitData(mainData)
            this.getPlayerData()
          }
        } catch (e) {
          this.getData()
        }
      },
      getPlayerData () {
        let page = this.players.length / this.mainData.page.show_player_num + 1
        let params = { id: this.id, page: page, page_size: this.mainData.page.show_player_num, sort: this.sort,search:this.search }
        getPlayers(params).then(rep => {
          this.players.push(...rep.data.data.list)
          if(this.players.length>=rep.data.data.count){
            this.loadmore=false;
          }else {
            this.loadmore=true;
          }
        })
      },
      getTime (index, value) {
        if (index === 0) {
          if (value < 10) {
            return 0
          } else {
            return value.toString().substr(0, 1)
          }
        } else {
          if (value < 10) {
            return value
          } else {
            return value.toString().substr(1, 2)
          }
        }
      },
      getData () {
        let vm = this
        getActive(this.id).then(rep => {
          //保存站点配置
          vm.GLOBAL.setMainData(rep.data.data)
          vm.setInitData(rep.data.data)
          vm.getPlayerData()
        })
      },
      setInitData (mainData) {
        this.$wx.wxShare(null);
        //如果今日之星开启，并且生成的今日之星，就将今日之星的图片插入到顶部轮播第二张中
        this.mainData = mainData
        this.checkCanApply();
        let vote_end_time = this.mainData.vote_end_time.replace(/\-/g, '/');
        this.time = (new Date(vote_end_time).getTime()) - (new Date().getTime())
        if (this.mainData.content.everyday_start == this.GLOBAL.contentConst.CONTENT_EVERYDAY_STAR_OPEN) {
          if (!isNull(this.mainData.content.voice_player_img)) {
            this.mainData.content.banners.splice(1, 0, { img: this.mainData.content.voice_player_img })
          }
        }

        if (this.mainData.page.generate_poster === this.GLOBAL.pageConst.BANNER_DM_OPEN) {
          this.interval =true;
          this.getDm(true);
        }
        this.$nextTick(() => {
          if (this.mainData.page.float_img != null && this.mainData.page.float_img.length > 0) {
            this.snowConf.images = [this.GLOBAL.getUrl(this.mainData.page.float_img[0], true)];
            this.show = true;
            setTimeout(() => {
              this.show = false
            }, 4000)
          }
          //评论
        })
      },
      getDm (first) {
        let vm = this
        if (this.currentIdPage * 4 > this.barrageCount) {
          this.currentIdPage = 1
        }

        getDmListByActive(this.id, this.currentIdPage, 4).then(rep => {
          let index = 0
          vm.currentIdPage++
          vm.barrageCount = rep.data.data.count
          rep.data.data.list.forEach(v => {
            let item = { id: ++vm.currentId, avatar: v.head_img, msg: v.content, time: Math.random() * 10 + 5  }
            vm.tempBarrageList.push(item)
            index++
          })
          vm.barrageList.push(...vm.tempBarrageList)
          vm.tempBarrageList = [];
          if(!vm.barrageIsShow ){
            vm.barrageIsShow = true;
          }
          if(this.interval){
            setTimeout(()=>{
              vm.getDm(false);
            },6000)
          }
        })
      },
      onCancel(){
        this.players = [];
        this.getPlayerData();
      },
      onSearch () {
        this.players = [];
        this.getPlayerData();
      },
      toTs () {
        this.$router.push({ name: 'report' })
      },
      toRank () {
        this.$router.push({ name: 'rank' })
      },
      toRule () {
        this.$router.push({ name: 'rule' })
      },
      toApply () {
        this.$router.push({ name: 'apply' })
      },
      toPlayer (id) {
        this.$router.push({ name: 'player', query: { pid: id } })
      }
    }
  }
</script>
